<template>
  <div class="side-graph-setting-container">
    <div
      v-if="activeSettingItem === 'background'"
      class="canvas-setting-container"
    >
      <div class="setting-title">画板配置</div>
      <div class="setting-content">
        <div class="size-setting-box">
          <div class="setting-item">
            <div class="label">宽度</div>
            <a-input-number
              size="small"
              :max="1920"
              :min="800"
              :value="dataStore.layoutData.width"
              @change="handleWidthChange"
            />
            <span class="sub">px</span>
          </div>
          <!-- <div class="setting-item">
            <div class="label">高度</div>
            <a-input-number
              size="small"
              :min="500"
              :value="dataStore.layoutData.height"
              @change="handleHeightChange"
            />
            <span class="sub">px</span>
          </div> -->

          <div class="setting-item">
            <div class="label">背景色</div>
            <color-picker
              size="small"
              :value="dataStore.layoutData.background"
              @change="onBackgroundChange"
            />
          </div>
        </div>
      </div>
    </div>
    <div
      v-else-if="activeSettingItem === 'chart'"
      class="chart-setting-container"
    >
      <div
        v-if="
          dataStore.currentGridItem &&
          dataStore.currentGridItem.chartType === 'configuration'
        "
        class="setting-title"
      >
        控件配置
      </div>
      <div
        v-else-if="
          dataStore.currentGridItem &&
          dataStore.currentGridItem.chartType === 'filterForm'
        "
        class="setting-title"
      >
        筛选器配置
      </div>
      <div v-else class="setting-title">图表配置</div>
      <control-setter />
    </div>
    <div
      v-else-if="activeSettingItem === 'text'"
      class="text-setting-container"
    >
      <formula-form :dataset="dataset"></formula-form>
    </div>
    <div class="handler" @click="toggleSettingPanel">
      <a-icon :type="graphIsOpen ? 'right' : 'left'" />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Emit, Prop, Watch } from 'vue-property-decorator'
import ControlSetter from '@/components/controlSetter/main.vue'
import VisualizationStore from '@/store/modules/visualization'
import ColorPicker from '@/components/form/color-picker.vue'
import { queryDatalist2 } from '@/api/data-list'
import { debounce } from 'lodash'
import FormulaForm from '@/components/common/VisualizationDashboard/FormulaForm.vue'

@Component({
  components: {
    ControlSetter,
    'color-picker': ColorPicker,
    FormulaForm,
  },
})
export default class SideGraphSetting extends Vue {
  @Prop({
    type: Boolean,
    default() {
      return true
    },
  })
  public graphIsOpen!: boolean

  @Prop({
    type: String,
    default() {
      return 'property'
    },
  })
  settingMode!: string

  private dataset: any = []

  @Watch('settingMode')
  getSettingMode(newValue: string) {
    VisualizationStore.setSettingMode(newValue)
    return newValue
  }
  mounted() {
    VisualizationStore.setSettingMode('property')
    this.datasetList()
  }

  public async datasetList() {
    const postData = {
      projectId: this.$route.params.id,
    }
    const response = await queryDatalist2({ data: postData })
    if (response.data.code === 100) {
      this.dataset = response.data.result
    } else {
      this.$message.error('获取数据集失败')
    }
  }

  public get dataStore() {
    return VisualizationStore
  }

  public get activeSettingItem() {
    return VisualizationStore.activeSettingItem
  }

  private handleWidthChange = debounce(
    (value: number) => this.onWidthChange(value),
    300
  )

  private handleHeightChange = debounce(
    (value: number) => this.onHeightChange(value),
    300
  )

  public onWidthChange(value: number): void {
    //  blur then judge
    let maxWidth = 0
    const element = document.querySelectorAll('.vue-grid-item')
    element.forEach((item: any) => {
      const transformX = item.style.transform.match(
        /translate3d\((\d+)px,\s*(\d+)px,\s*(\d+)px\)/i
      )[1]
      const borderWidth = Number(transformX) + Number(item.offsetWidth) + 10
      maxWidth = borderWidth > maxWidth ? borderWidth : maxWidth
    })
    if (maxWidth > value) {
      this.$message.warning(`当前可设置的最小宽度为${maxWidth}`)
    } else {
      VisualizationStore.setBackgroundWidth(value)
    }
    //  按照目前布局，。。为最小可设置的宽度
  }
  public onBackgroundChange(color: string) {
    VisualizationStore.setBackgroundColor(color)
  }
  public onHeightChange(value: number): void {
    //  blur then judge
    let maxHeight = 0
    const element = document.querySelectorAll('.vue-grid-item')
    element.forEach((item: any) => {
      const transformY = item.style.transform.match(
        /translate3d\((\d+)px,\s*(\d+)px,\s*(\d+)px\)/i
      )[2]
      const borderHeight = Number(transformY) + Number(item.offsetHeight)
      maxHeight = borderHeight > maxHeight ? borderHeight : maxHeight
    })
    if (maxHeight > value) {
      this.$message.warning(`当前可设置的最小高度为${maxHeight}`)
    } else {
      VisualizationStore.setBackgroundHeight(value)
    }
    //  按照目前布局，。。为最小可设置的高度
  }
  @Emit('toggleSettingPanel')
  toggleSettingPanel() {
    return this
  }
}
</script>

<style lang="less" scoped>
.side-graph-setting-container {
  background: #f9f9fc;
  height: 100%;
  width: 300px;
  z-index: 1001;

  .setting-content {
    box-sizing: border-box;
    height: 100%;
    padding: 10px;
    position: relative;
    width: 100%;
  }

  .setting-title {
    border-bottom: 1px solid #ddd;
    color: #5d637e;
    font-size: 14px;
    font-weight: bold;
    height: 38px !important;
    line-height: 38px;
    position: relative;
    text-align: center;

    &::after {
      background: #06f;
      content: ' ';
      height: 2px;
      width: 58px;
    }
  }

  .size-setting-box {
    display: block;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 0 10px;
    width: 100%;

    .setting-item {
      display: flex;
      flex-flow: row nowrap;
      width: 100%;

      .label {
        width: 40%;
      }

      /deep/ .ant-input-number {
        width: 60%;
      }
    }

    .setting-item + .setting-item {
      margin-top: 16px;
    }
  }

  .setting-item {
    display: block;
    flex-flow: column wrap;
    justify-content: flex-start;
  }

  /deep/ .ant-tabs-nav.ant-tabs-nav-animated {
    width: 100%;

    .ant-tabs-ink-bar.ant-tabs-ink-bar-animated {
      display: none !important;
    }

    .ant-tabs-tab {
      color: rgba(93, 99, 126, 1);
      font-size: 14px;
      font-weight: bold;
      margin: 0;
      padding-right: 0;
      text-align: center;
      width: 140px;

      &:first-child {
        &.ant-tabs-tab-active {
          &::after {
            transform: translateX(-22px) !important;
          }
        }
      }

      &.ant-tabs-tab-active {
        color: rgba(93, 99, 126, 1);

        &::after {
          background: #6973ff;
          bottom: 1px;
          content: ' ';
          height: 2px;
          left: 50%;
          position: absolute;
          transform: translateX(-20px);
          width: 58px;
        }
      }
    }
  }
}

.chart-setting-container {
  height: 100%;
  position: absolute;
  width: 100%;

  /deep/ .ant-tabs.ant-tabs-top {
    height: 100%;

    .ant-tabs-bar {
      margin-bottom: 0;
    }

    .ant-tabs-content.ant-tabs-top-content {
      height: calc(100% - 60px);

      .ant-tabs-tabpane {
        height: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
        transition: all ease 0.2s;
        width: 100%;

        &::-webkit-scrollbar {
          height: 6px;
          width: 6px;
        }

        &::-webkit-scrollbar-thumb {
          background: rgba(144, 147, 153, 0.5);
          border-radius: 6px;
        }

        &::-webkit-scrollbar-track {
          background: transparent;
          border-radius: 5px;
        }
      }
    }
  }
}

.handler {
  background: #dee3f7;
  color: #1e49f8;
  font-size: 9px;
  height: 70px;
  left: -12px;
  line-height: 70px;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;

  &::before,
  &::after {
    border: 6px solid #dee3f7;
    content: ' ';
    height: 0;
    left: 0;
    position: absolute;
    width: 0;
  }

  &::before {
    border-left-color: transparent;
    border-top-color: transparent;
    top: -12px;
  }

  &::after {
    border-bottom-color: transparent;
    border-left-color: transparent;
    bottom: -12px;
  }
}

.sub {
  margin-left: 4px;
}

// header
.node-style-layout-header {
  align-items: center;
  background-color: #f9f9fc;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  height: 38px;
  justify-content: space-between;
  user-select: none;

  > span {
    color: #5d637e;
    font-weight: 600;
    letter-spacing: 1px;
  }
}

// layout header
.node-layout-header {
  border-top: 1px solid #e9e9e9;
}

// 节点样式 模块
.node-style-content {
  height: auto;
  padding: 0 24px;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(144, 147, 153, 0.5);
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 5px;
  }
}

.add-filter {
  align-items: center;
  color: #6a74ff;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 400;
  height: 32px;
  justify-content: center;
  letter-spacing: 1px;
  width: 100%;

  .add-filter-icon {
    font-size: 16px;
  }

  .add-filter-text {
    margin-left: 10px;
    // 文本不可选中
    user-select: none;
  }
}

.close-fold {
  height: 0;
}
</style>
